<template>
  <div>
    <div class="search_form">
			<div>
				<el-date-picker
					size="mini"
					v-model="searchForm.workDate"
					type="date"
					format="yyyy年MM月dd日"
					value-format="yyyy-MM-dd"
					placeholder="选择日期"
					class="others"
          clearable
				></el-date-picker>
        <el-select
					size="mini"
					clearable
					placeholder="请选择班次"
					v-model="searchForm.workTime"
					class="others"
					popper-class="selectClass"
				>
					<el-option v-for="(item, index) in workTimeList" :key="index" :label="item.dictLabel" :value="item.dictValue"></el-option>
				</el-select>
				<el-button @click="searchData" class="search_btn" type="primary" icon="el-icon-search" size="mini">
					查询
				</el-button>
			</div>
      <div>
        <!-- <el-button type="primary" icon="iconfont icon-shengchanzuoyelihuopiao" size="mini" @click="signTicket" v-hasPermi="['yardManagement:TYardTicket:addTYardTicket']">签票</el-button> -->
        <el-button type="primary" icon="iconfont icon-shengchanzuoyelihuopiao" size="mini" @click="signAmount" v-hasPermi="['yardManagement:TYardTicket:addTYardTicketShare']">签票</el-button>
        <el-button type="primary" icon="iconfont icon-suichexiaopiao" size="mini" @click="openTally">查询理货记录</el-button>
      </div>
		</div>
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick(activeName)">
      <el-tab-pane label="船舶计划" name="first">
        <!-- 主列表table -->
        <BaseTable 
          :loading="loading"
          :data="tableData"
          :columns="columns" 
          :tableHeight="tableHeight" 
          @details="handlerClick" 
          :pagination="false"></BaseTable>
      </el-tab-pane>
      <el-tab-pane label="零工计划" name="second">
        <!-- 主列表table -->
        <BaseTable 
          :loading="oloading"
          :data="oddJobTableData"
          :columns="oddJobColumns" 
          :tableHeight="tableHeight" 
          @details="oddJobhandlerClick" 
          :pagination="false" ></BaseTable>
      </el-tab-pane>
      <el-tab-pane label="集疏港计划" name="third">
        <!-- 主列表table -->
        <BaseTable 
          :loading="ploading"
          :data="openPortTableData"
          :columns="openPortColumns" 
          :tableHeight="tableHeight" 
          @details="openPortHandlerClick" 
          :pagination="false" ></BaseTable>
      </el-tab-pane>
      <el-tab-pane label="转运计划" name="four">
        <BaseTable 
          :loading="transshipmentloading"
          :data="transshipmentTableData"
          :columns="transshipmentColumns" 
          :tableHeight="tableHeight" 
          @details="transshipmenthandlerClick" 
          :pagination="false"></BaseTable>
      </el-tab-pane>
    </el-tabs>
    <el-drawer title="作业票" :visible.sync="isShow" size="80%">
      <template slot="title">
        <div class="searchform">
          <div>
            <span style="margin-left: 10px;font-size: 16px;" v-if="!isShowAmount">作业票</span>
            <span style="margin-left: 10px;font-size: 16px;" v-else>作业票</span>
          </div>
          <div>
            <el-button type="primary" size="mini" @click="auditTicket" v-hasPermi="['yardManagement:TYardTicket:updateStatus']">审核</el-button>
            <el-button type="primary" size="mini" @click="marketAuditTicket" v-hasPermi="['yardManagement:TYardTicket:updateStatus']">销审</el-button>
          </div>
        </div>
      </template>
      <div v-if="isShow">
        <detailPage :workLineInfo="workLineInfo" :isShowAmount="isShowAmount"></detailPage>
      </div>
    </el-drawer>
    <el-drawer title="理货记录" :visible.sync="isShowTally" size="80%">
      <template slot="title">
        <div class="searchform">
          <div>
            <span style="margin-left: 10px;font-size: 16px;">理货记录</span>
          </div>
        </div>
      </template>
      <div v-if="isShowTally">
        <tallyDetail :workLineInfo="workLineInfo"></tallyDetail>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import BaseTable from '@/components/BaseTable'
import publicapi from '@/api/public/index'
import api from '@/api/yardTally/singTicket/index'
import detailPage from './subpage/tallyTicket.vue'
import tallyDetail from './subpage/tallyWeight.vue'
import tallyAmount from './subpage/tallyAmount.vue'
export default {
  components: { BaseTable,detailPage,tallyDetail,tallyAmount },
  data () {
    return{
      searchForm: {
        workDate: '',
        workTime: '01',
      },
      workTimeList: [], // 班次
      loading: false,
      tableData: [],
      columns: [
        {
          prop: 'planNo',
          label: '作业线序号',
        },
        {
          prop: 'checkInStatus',
          label: '状态',
          render(h,params) {
            if (params.row.checkInStatus == '1') {
              return h('el-tag', {
                props: {
                  size: 'mini'
                },
                domProps: {
                  innerHTML: '未签'
                }
              })
            } else if (params.row.checkInStatus == '2') {
              return h('el-tag', {
                props: {
                  size: 'mini',
                  type: 'success'
                },
                domProps: {
                  innerHTML: '已签'
                }
              })
            } else if (params.row.checkInStatus == '3') {
              return h('el-tag', {
                props: {
                  size: 'mini',
                  type: 'warning'
                },
                domProps: {
                  innerHTML: '已审核'
                }
              })
            }
          }
        },
        {
          prop: 'nameVoyage',
          label: '船名航次',
        },
        {
          prop: 'cargoCategoryName',
          label: '货种',
        },
        {
          prop: 'customerName',
          label: '客户名称',
          isShort: true,
        },
        {
          prop: 'loadUnload',
          label: '装卸',
        },
        {
          prop: 'berthNo',
          label: '泊位',
        },
        {
          prop: 'storehouseName',
          label: '场地',
        },
        {
          prop: 'deptName',
          label: '作业工段',
        },
        {
          prop: 'cooperationName',
          label: '协力队',
        },
        {
          prop: 'ruler',
          label: '理货员',
        },
        {
          prop: 'tallyClerk',
          label: '检尺员',
        },
        {
          prop: 'instructorName',
          label: '指导员',
        },
        {
          prop: 'workloadPlan',
          label: '计划量',
        },
      ],
      oloading: false,
      oddJobTableData: [],
      oddJobColumns: [
        {
          prop: 'planNo',
          label: '编号',
          width: 120
        },
        {
          prop: 'checkInStatus',
          label: '状态',
          render(h,params) {
            if (params.row.checkInStatus == '1') {
              return h('el-tag', {
                props: {
                  size: 'mini'
                },
                domProps: {
                  innerHTML: '未签'
                }
              })
            } else if (params.row.checkInStatus == '2') {
              return h('el-tag', {
                props: {
                  size: 'mini',
                  type: 'success'
                },
                domProps: {
                  innerHTML: '已签'
                }
              })
            } else if (params.row.checkInStatus == '3') {
              return h('el-tag', {
                props: {
                  size: 'mini',
                  type: 'warning'
                },
                domProps: {
                  innerHTML: '已审核'
                }
              })
            }
          }
        },
        {
          prop: 'processName',
          label: '作业过程',
        },
        {
          prop: 'nameVoyage',
          label: '船名航次',
          width: 120
        },
        {
          prop: 'cargoCategoryName',
          label: '货种',
        },
        {
          prop: 'workContent',
          label: '作业内容',
        },
        {
          prop: 'deptName',
          label: '作业工段',
        },
        {
          prop: 'supporting',
          label: '机械',
          width: 120,
        },
        {
          prop: 'laborDispatch',
          label: '劳务',
        },
        {
          prop: 'applyDeptName',
          label: '申请单位',
        },
        {
          prop: 'remark',
          label: '备注',
        },
      ],
      ploading: false,
      openPortTableData: [],
      openPortColumns: [
        {
          prop: 'planNo',
          label: '编号',
          width: 140
        },
        {
          prop: 'checkInStatus',
          label: '状态',
          render(h,params) {
            if (params.row.checkInStatus == '1') {
              return h('el-tag', {
                props: {
                  size: 'mini'
                },
                domProps: {
                  innerHTML: '未签'
                }
              })
            } else if (params.row.checkInStatus == '2') {
              return h('el-tag', {
                props: {
                  size: 'mini',
                  type: 'success'
                },
                domProps: {
                  innerHTML: '已签'
                }
              })
            } else if (params.row.checkInStatus == '3') {
              return h('el-tag', {
                props: {
                  size: 'mini',
                  type: 'warning'
                },
                domProps: {
                  innerHTML: '已审核'
                }
              })
            }
          }
        },
        {
          prop: 'processName',
          label: '作业过程'
        },
        {
          prop: 'nameVoyage',
          label: '船名航次',
          width: 120
        },
        {
          prop: 'cargoCategoryName',
          label: '货种',
        },
        {
          prop: 'customerName',
          label: '货代',
          isShort: true,
        },
        {
          prop: 'customerName',
          label: '货主',
          isShort: true,
        },
        {
          prop: 'loadUnload',
          label: '装卸'
        },
        {
          prop: 'berthNo',
          label: '泊位'
        },
        {
          prop: 'storehouseName',
          label: '库场'
        },
        {
          prop: 'deptName',
          label: '作业工段',
          width: 130,
        },
        {
          prop: 'cooperationName',
          label: '协力队',
          width: 130,
        },
        {
          prop: 'tallyFront',
          label: '前沿',
          width: 130,
        },
        {
          prop: 'transport',
          label: '转运',
          width: 130,
        },
        {
          prop: 'tallyBack',
          label: '后场',
          width: 130,
        },
        {
          prop: 'supporting',
          label: '辅助',
          width: 130,
        },
        {
          prop: 'laborDispatch',
          label: '劳务',
          width: 130,
        },
        {
          prop: 'foreignTallyCompanyName',
          label: '外理单位'
        },
        {
          prop: 'ruler',
          label: '理货员',
        },
        {
          prop: 'tallyClerk',
          label: '检尺员',
        },
        {
          prop: 'instructorName',
          label: '指导员',
          width: 130,
        },
        {
          prop: 'workloadPlan',
          label: '计划量'
        },
        {
          prop: 'remark',
          label: '作业要求'
        },
      ],
      tableHeight: window.innerHeight - 200,
      isShow: false,
      workLineInfo: null,
      activeName: 'first',
      isShowTally: false,
      isShowAmount: false, // 作业量抽屉
      transshipmentloading: false, // 转运
      transshipmentTableData: [],
      transshipmentColumns: [
        {
          prop: 'planNo',
          label: '编号',
          width: 140
        },
        {
          prop: 'processName',
          label: '作业过程'
        },
        {
          prop: 'nameVoyage',
          label: '船名航次',
          width: 120
        },
        {
          prop: 'cargoCategoryName',
          label: '货种'
        },
        {
          prop: 'customerName',
          label: '货代',
          isShort: true,
        },
        {
          prop: 'loadUnload',
          label: '装卸'
        },
        {
          prop: 'berthNo',
          label: '泊位'
        },
        {
          prop: 'storehouseNameSource',
          label: '起始区域'
        },
        {
          prop: 'storehouseNameTarget',
          label: '终点区域'
        },
        {
          prop: 'deptName',
          label: '作业工段',
          width: 130
        },
        {
          prop: 'cooperationName',
          label: '协力队',
          width: 130
        },
        {
          prop: 'tallyFront',
          label: '前沿',
          width: 130
        },
        {
          prop: 'transport',
          label: '转运',
          width: 130
        },
        {
          prop: 'tallyBack',
          label: '后场',
          width: 130
        },
        {
          prop: 'supporting',
          label: '辅助',
          width: 130
        },
        {
          prop: 'laborDispatch',
          label: '劳务',
          width: 130
        },
        {
          prop: 'foreignTallyCompanyName',
          label: '外理单位'
        },
        {
          prop: 'tallyClerk',
          label: '理货员',
          width: 130
        },
        {
          prop: 'instructorName',
          label: '指导员',
          width: 130
        },
        {
          prop: 'workloadPlan',
          label: '计划量'
        },
        {
          prop: 'endTimePlan',
          label: '计划完工时间',
          width: 120
        },
        {
          prop: 'remark',
          label: '作业要求'
        },
      ],
    }
  },
  activated () {
    this.getDictData()
    this.getScheduleNow()
    //  日期默认当天
		let date = new Date()
		let theYear = date.getFullYear() //获取完整的年份(4位)
		let theMonth = date.getMonth() + 1 //获取当前月份(1-12,1代表1月)
		theMonth = theMonth >= 10 ? theMonth : "0" + theMonth
		let theDay = date.getDate() //获取当前日(1-31)
		theDay = theDay >= 10 ? theDay : "0" + theDay
    this.searchForm.workDate = theYear+'-'+theMonth+'-'+theDay
  },
  methods: {
    // 获取当前班次
    getScheduleNow () {
      publicapi.getScheduleNow().then(res => {
        this.searchForm.workTime = res.data.data.scheduleType
      })
    },
    // 查询字典信息
    getDictData () {
      publicapi.getDictData('SCHEDULE').then(res => {
        this.workTimeList = res.data.data.SCHEDULE
      })
    },
    // 点击tab页
    handleClick (val) {
      this.searchData()
    },
    // 查询主列表信息
    searchData () {
      let params = Object.assign({},this.searchForm)
      if (this.activeName == 'first') {
        this.loading = true
        params.planType = '1'
        api.queryByPlanType(params).then(res => {
          this.loading = false
          this.tableData = res.data.data
        })
      }
      if (this.activeName == 'second') {
        this.oloading = true
        params.planType = '3'
        api.queryByPlanType(params).then(res => {
          this.oloading = false
          this.oddJobTableData = res.data.data
        })
      }
      if (this.activeName == 'third') {
        this.ploading = true
        params.planType = '2'
        api.queryByPlanType(params).then(res => {
          this.ploading = false
          this.openPortTableData = res.data.data
        })
      }
      if (this.activeName == 'four') {
        this.transshipmentloading = true
        params.planType = '4'
        api.queryByPlanType(params).then(res => {
          this.transshipmentloading = false
          this.transshipmentTableData = res.data.data
        })
      }
      this.workLineInfo = null
    },
    // 点击一行
    handlerClick (val) {
      this.workLineInfo = val
    },
    // 点击零工行
    oddJobhandlerClick (val) {
      this.workLineInfo = val
    },
    // 点击集疏港行
    openPortHandlerClick (val) {
      this.workLineInfo = val
    },
    // 显示签票界面
    signTicket () {
      if (this.workLineInfo == null)
        return this.$message.warning('请先选择一条数据')
      this.isShow = true
      this.isShowAmount = false
    },
    // 审核作业票
    auditTicket () {
      let params = {
        planId: this.workLineInfo.id,
        type: '1'
      }
      api.updateStatus(params).then(res => {
        if (res.data.code != '0000') {
          return this.$message.error(res.data.msg)
        }
        this.$message.success(res.data.msg)
        this.isShow = false
        this.searchData()
      })
    },
    // 销审作业票
    marketAuditTicket () {
      let params = {
        planId: this.workLineInfo.id,
        type: '2'
      }
      api.updateStatus(params).then(res => {
        if (res.data.code != '0000') {
          return this.$message.error(res.data.msg)
        }
        this.$message.success(res.data.msg)
      })
    },
    // 打开理货记录抽屉
    openTally () {
      if (this.workLineInfo == null) {
        return this.$message.warning('请先选择一天数据')
      }
      this.isShowTally = true
    },
    // 打开签作业量抽屉
    signAmount () {
      if (this.workLineInfo == null)
        return this.$message.warning('请先选择一条数据')
      this.isShow = true
      this.isShowAmount = true
    },
    // 转运选中
    transshipmenthandlerClick (val) {
      this.workLineInfo = val
    },
  }
}
</script>
<style lang="less" scoped>
@import "../../../assets/searchfrom.less";
@import "./index.less";
/deep/ .el-drawer__header {
  padding: 0;
}
.searchform {
  background-color: #ffffff;
  color: #303133;
  border-radius: 0px;
  border: 1px solid #ffffff;
  font-size: 14px;
  color: #606266;
  border-bottom: none;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 20px;
  box-sizing: border-box;
  /deep/.el-select{
    margin-right: 0.7em;
  }
  /deep/.search_btn{
    margin-left: 0.7em;
  }
  /deep/.el-date-editor{
    margin-left: 0.7em;
  }
  /deep/.others{
    width: 153px;
  }
  /deep/.inout{
    width: 100px;
  }
  /deep/.el-input{
    margin-left:0.7em;
  }
}
</style>